<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智慧农业系统登录页</title>
    <link rel="stylesheet" href="css/login.css" type="text/css"/>
    <style>
        html, body {
            height: 100%;
        }
        body {
            font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
            margin: 0;
            background: url('./img/bgimg.jpg') no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-position: center 0;
        }

        #login {
            background-color: #fff;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
            background-image: -webkit-linear-gradient(top, #fff, #eee);
            background-image: -moz-linear-gradient(top, #fff, #eee);
            background-image: -ms-linear-gradient(top, #fff, #eee);
            background-image: -o-linear-gradient(top, #fff, #eee);
            background-image: linear-gradient(top, #fff, #eee);
            height: 240px;
            width: 400px;
            margin: -150px 0 0 -230px;
            padding: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 0;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2),
            0 1px 1px rgba(0, 0, 0, .2),
            0 3px 0 #fff,
            0 4px 0 rgba(0, 0, 0, .2),
            0 6px 0 #fff,
            0 7px 0 rgba(0, 0, 0, .2);
            -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2),
            1px 1px 0 rgba(0, 0, 0, .1),
            3px 3px 0 rgba(255, 255, 255, 1),
            4px 4px 0 rgba(0, 0, 0, .1),
            6px 6px 0 rgba(255, 255, 255, 1),
            7px 7px 0 rgba(0, 0, 0, .1);
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.2),
            0 1px 1px rgba(0, 0, 0, .2),
            0 3px 0 #fff,
            0 4px 0 rgba(0, 0, 0, .2),
            0 6px 0 #fff,
            0 7px 0 rgba(0, 0, 0, .2);
        }

        #login:before {
            content: '';
            position: absolute;
            z-index: -1;
            border: 1px dashed #ccc;
            top: 5px;
            bottom: 5px;
            left: 5px;
            right: 5px;
            -moz-box-shadow: 0 0 0 1px #fff;
            -webkit-box-shadow: 0 0 0 1px #fff;
            box-shadow: 0 0 0 1px #fff;
        }
    </style>
</head>
<body id="boby">
<table id="login">
    <th>
        <h1>智慧农业系统登录</h1>
        <fieldset id="inputs">
            <input id="username" type="text" placeholder="用户名" autofocus required><br/>
            <input id="password" type="password" placeholder="密码" required>
        </fieldset>
        <fieldset id="actions">
            <input type="submit" id="submit" value="登录">
            <a href="">忘记密码</a>
            <a href="./register.html">注册用户</a>
        </fieldset>
    </th>
</table>
<script src="./js/jquery.js"></script>
<script src="layui/layui.js"></script>
<script type="text/javascript">
    layui.use("layer", function () {
        var layer = layui.layer;
        layer.open({
            type: 1
            , offset: 'auto' //垂直水平居中
            //,id: 'layerDemo'+type //防止重复弹出
            , content: '<div style="padding: 20px 100px;">' + '账户名和密码都是admin' + '</div>'
            , btn: '关闭全部'
            , btnAlign: 'c' //按钮居中
            , shade: 0 //不显示遮罩
            , yes: function () {
                layer.closeAll();
            }
        });

    });

    $(function () {
        $("#submit").click(function () {
            var name = $("#username").val();
            var pass = $("#password").val();

            //获取json格式的文本内容
            //登录账户密码验证
            $.ajax({
                type: "get",
                url: "users.json",
                dataType: "json",
                success: function (res) {
                    var list = res.animals
                    console.log(list)
                    /*alert(list[0].username)*/
                    for (var $i = 0; $i < list.length; $i++) {
                        if (list[$i].username == name) {
                            if (list[$i].password == pass) {
                                /*alert("登录成功")*/
                                location.href = "./index.html?username="+name;
                                return;
                            }
                        }
                        if ($i == list.length - 1) {
                            alert("账户或密码错误");
                            return;
                        }
                    }
                }
            });

        })
    })
</script>

</body>
</html>